<template>
<div style="position: relative; height: 100%;">
  <div class="meitu-header-wrapper" :style="{backgroundImage: 'url(' + headerBg + ')', paddingTop: tabPadding + 'px'}">
    <tab active-color="#fff" default-color="#fff" class="header" custom-bar-width="20px" :line-width="2.5" style="height: 40px">
      <tab-item
        class="vuxCenter"
        active-class="activeClass"
        :selected="current === item.value"
        v-for="item in headerList"
        :key="item.value"
        @click.native="current = item.value">
        {{item.label}}
      </tab-item>
    </tab>
  </div>

  <!-- <v-touch @swipeleft="swipeleft" @swiperight="swiperight" class="type-dynamic-wrapper" :style="{height: swiperHeight + 'px'}"> -->
  <div class="type-dynamic-wrapper" :style="{height: swiperHeight + 'px'}">
    <!-- 推荐 -->
    <traveling ref="recommendScroll" v-if="current === 0"></traveling>
    <!-- 本地人 -->
    <native ref="nativeScroll" v-else-if="current === 1"></native>
    <!-- 关注 -->
    <follow ref="followScroll" v-else-if="current === 2"></follow>
  </div>

  <input ref="selectImg" type="file" @change="selectImg" accept="image/*" multiple style="display: none;"/>
  <div ref="plus" class="plus" @click="publishDynamic" v-show="showPlus">
    <i class="icon iconfont icon-plus-b"></i>
  </div>

  <router-view />
</div>
</template>

<script>
import headerBg from '@/assets/img/header_bg.png'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import uploadFile from '@/api/uploadFile'
import defaultAvatar from '@/assets/img/default_avatar.png'
import plusBg from '@/assets/img/plusBg.png'

import { Tab, TabItem, TransferDom, Popup } from 'vux'
import { mapMutations } from 'vuex'
import Traveling from './meiTuTab/traveling'
import Native from './meiTuTab/native'
import Follow from './meiTuTab/follow'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'MeiTu',
  mixins: [handleBackMixin],
  data () {
    return {
      headerBg,
      defaultAvatar,
      current: 0,
      headerList: [
        {
          value: 0,
          label: this.$t('tab.traveling')
        },
        {
          value: 1,
          label: this.$t('tab.native')
        },
        {
          value: 2,
          label: this.$t('tab.follow')
        }
      ],
      selectAtlas: [],
      showPlus: true,
      plusBg: plusBg,
      allDisabledBack: true,
      allPopupModels: [],
      plusTrans: ''
    }
  },
  created () {
    this.tabHeight = 50
    this.tabPadding = 20
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.tabPadding = 34
      this.paddingBottom = 34
    }
    this.isLocal = localUser.get('local')
    this.swiperHeight = window.innerHeight - 40 - 50 - this.tabPadding - this.paddingBottom
  },
  directives: {
    TransferDom
  },
  components: {
    Tab, TabItem, Native, Follow, Traveling, Popup
  },
  methods: {
    publishDynamic () {
      const user = localUser.get()
      if (user == null) {
        // this.$vux.toast.text('请先登录！', 'middle')
        this.$router.push('/login')
        return
      }
      this.$refs.selectImg.dispatchEvent(new MouseEvent('click'))
    },
    selectImg (e) {
      if (e.target.files.length > 0 && e.target.files[0].size === 0) return
      if (e.target.files.length > 15) {
        this.$vux.toast.text('最多只能选15张图片', 'middle')
        return
      }
      const _self = this
      uploadFile(this, e.target.files, (data) => {
        let temp = []
        data.forEach(item => {
          temp.push(item.downloadPath)
        })
        e.target.value = ''
        _self.setSelectPic(temp)
      }, null, false)
      _self.$router.push('/meiTu/publishDynamic')
    },
    swiperight () {
      // 先禁用     和横向滚动有冲突
      // if (this.current <= 0) {
      //   this.current = this.headerList.length - 1
      // } else {
      //   this.current--
      // }
    },
    swipeleft () {
      // if (this.current >= (this.headerList.length - 1)) {
      //   this.current = 0
      // } else {
      //   this.current++
      // }
    },
    ...mapMutations({
      setSelectPic: 'SET_SELECT_PIC'
    })
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'MeiTu') {
        this.showPlus = true
      } else {
        this.showPlus = false
      }
    }
  }
}
</script>

<style>
  .meitu-header-wrapper .header .vux-tab {
    background: none;
  }
  .meitu-header-wrapper .header .scrollable {
    padding-bottom: 13px;
  }
  .meitu-header-wrapper .header .vux-tab-ink-bar {
    bottom: 4px
  }
</style>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'

  .meitu-header-wrapper {
    background-size: cover;
    background-repeat: no-repeat;

    .header {
      height: 45px;
      padding-top: 0;
      background: none;
      .vux-tab-item {
        background: none;
        padding-bottom: 1px;
      }
      .vux-tab-selected {
        font-size: $font-size-title;
      }
    }
  }

  .plus {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%) translateZ(501px);
    text-align: center;
    z-index: 501;
    color: $color-theme;
    i {
      font-size: 45px;
      line-height: 45px;
    }
  }
  .activeClass{
    font-weight bold
  }
  .vuxCenter {
    font-size 16px !important
  }
</style>

